<!--
  - Copyright (C) 2024
  - All rights reserved, Designed By www.joolun.com
  - 注意：
  - 本软件为www.joolun.com开发研制，未经购买不得使用
  - 购买后可获得全部源代码（禁止转卖、分享、上传到码云、github等开源平台）
  - 一经发现盗用、分享等行为，将追究法律责任，后果自负
-->
<!--直播间 直播商品-->
<template>
	<view :class="['live-goods-box', { 'show-box': modalShow }]">
		<view v-if="modalShow" class="modal-show-cancel" @tap="hideModalShow" />
		<uni-transition
			mode-class="slide-bottom"
			:styles="{ width: boxWidth + 'px', height: boxHeight + 'px', backgroundColor: '#ffffff', position: 'fixed', bottom: 0, zIndex: 999 }"
			:show="modalShow"
			:duration="500"
		>
			<view class="live-goods">
				<view class="live-goods-title">
					<text class="title">直播商品</text>
					<image @tap="hideModalShow" class="close-icon" src="/package-live/static/img/icon_close.png" />
				</view>
				<scroll-view :scroll-y="true" :style="{ height: scrollHeight + 'px' }" class="live-goods-scroll" @scrolltolower="onScrolltolower">
					<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @tap="goGoodsDetail(item)">
						<view class="goods-image-box">
							<image
								:style="{ width: '220rpx', height: '220rpx', overflow: 'hidden', borderRadius: '12rpx' }"
								:src="item.picUrls[0] ? item.picUrls[0] : '/static/public/img/no_pic.png'"
							/>
							<text class="goods-index">
								{{ index + 1 }}
							</text>
							<view v-if="liveStatus == '1' && explainGoodsId === item.id" class="goods-live">
								<image class="live-icon" src="/package-live/static/img/icon_playing.gif" mode="" />
								<text class="live-text">讲解中</text>
							</view>
						</view>
						<view class="goods-info">
							<view class="goods-name-sign-box">
								<view class="goods-name-sign">
									<view>
										<text class="goods-name">
											{{ item.name }}
										</text>
									</view>
									<text class="goods-sell-point">
										{{ item.sellPoint }}
									</text>
								</view>
							</view>
							<view class="active-box">
								<text v-if="item.freightType == 0" class="active-item bg-scarlet">包邮</text>
								<text v-if="item.pointsGiveSwitch == '1'" class="active-item bg-orange">积分</text>
								<text v-if="item.vipDiscountSwitch == '1'" class="active-item bg-black">SVIP</text>
							</view>
							<view class="goods-bar">
								<view class="goods-price">
									<view :class="['cur-price', { 'cur-price-max-w': true }]">
										<text class="small">￥</text>
										<text class="big">
											{{ item.priceDown }}
										</text>
										<text v-if="item.priceDown != item.priceUp" class="big">-</text>
										<text class="small">￥</text>
										<text v-if="item.priceDown != item.priceUp" class="big">
											{{ item.priceUp }}
										</text>
									</view>
									<text v-if="item.marketPrice && item.marketPrice != 0" class="old-price">￥{{ item.marketPrice }}</text>
								</view>
								<view v-if="liveStatus == '1'">
									<view v-if="isAnchor" class="btn-box">
										<image v-if="explainGoodsId == item.id" class="btn-end" src="/package-live/static/img/icon_end.png" />
										<image v-else class="btn-play" src="/package-live/static/img/icon_play.png" />
										<text class="btn-txt" @tap="handleExplainGoods(item)">
											{{ explainGoodsId === item.id ? '结束讲解' : '开始讲解' }}
										</text>
									</view>
									<view v-else class="btn-box">
										<text class="btn-txt">查看详情</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="list-tips-box">
						<text v-if="!goodsList.length" class="empty-txt">暂无商品信息</text>
						<text class="empty-txt">已经到底啦~</text>
					</view>
				</scroll-view>
			</view>
		</uni-transition>
	</view>
</template>

<script>
/**
 * Copyright (C) 2024
 * All rights reserved, Designed By www.joolun.com
 * 注意：
 * 本软件为www.joolun.com开发研制，未经购买不得使用
 * 购买后可获得全部源代码（禁止转卖、分享、上传到码云、github等开源平台）
 * 一经发现盗用、分享等行为，将追究法律责任，后果自负
 */

import { getListByIds } from '@/api/mall/goodsspu';

export default {
	props: {
		/**
		 * 弹窗显示
		 */
		modalShow: {
			type: Boolean,
			default: false
		},
		sysInfo: {
			type: Object,
			default() {
				return {};
			}
		},
		/**
		 * 直播状态
		 */
		liveStatus: {
			type: String,
			default: 0
		},
		/**
		 * 是否是主播, 如果是主播那么就可以操作指定当前讲解商品
		 */
		isAnchor: {
			type: Boolean,
			default: false
		},
		/**
		 * 当前讲解的商品id
		 */
		explainGoodsId: {
			type: [String, Number],
			default: 0
		},
		/**
		 * 直播商品的id数组数据
		 */
		goodsIds: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	watch: {
		goodsIds: {
			handler() {
				this.getGoodsByIds();
			},
			immediate: true
		}
	},
	data() {
		return {
			mallConfig: getApp().globalData.mallConfig,
			boxWidth: 0,
			boxHeight: 0,
			scrollHeight: 0,
			loading: false,
			goodsList: [],
			couponList: []
		};
	},
	mounted() {
		this.initView();
	},
	methods: {
		initView() {
			const sysInfo = uni.getSystemInfoSync(); // 设备信息
			this.boxWidth = sysInfo.windowWidth;
			this.boxHeight = sysInfo.windowHeight * 0.7;
			this.scrollHeight = this.boxHeight; // 滚动区域高度
		},
		// [主播功能] 讲解指定商品
		onExplain(item) {
			this.$emit('changeExplainGoods', item);
		},
		onScrolltolower() {},
		getGoodsByIds() {
			if (this.goodsIds) {
				this.loading = true;
				getListByIds(this.goodsIds)
					.then((res) => {
						// 对接口返回的商品顺序进行排序
						let goods = new Array(this.goodsIds.length);
						res.data.map((item) => {
							let index = this.goodsIds.indexOf(item.id);
							goods[index] = item;
						});
						// 如果是下架或删除的商品则去掉
						let goodsNew = [];
						goods.map((item, index) => {
							if (item && !(item.shelf == '0' || item.enable == '0')) {
								goodsNew.push(item);
							}
						});
						this.goodsList = goodsNew;
						this.loading = false;
					})
					.catch(() => {
						this.goodsList = this.goodsList || [];
						this.loading = false;
					});
			} else {
				// this.goodsList = this.goodsList;
				this.loading = false;
			}
		},
		goGoodsDetail(item) {},
		touchMove() {
			return;
		},
		hideModalShow() {
			this.$emit('changeModalShow', false);
		},
		handleExplainGoods(item) {
			this.$emit('changeExplainGoods', item);
		},
		receiveCouponChange(item, index) {
			//更新单条数据
			this.$emit('receiveCouponChange', {
				item: item,
				index: index
			});
		}
	}
};
</script>
<style scoped lang="scss">
.live-goods-box {
	z-index: -1;
	position: fixed;
	flex: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	&.show-box {
		z-index: 888;
	}
	.modal-show-cancel {
		z-index: 100;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.4);
	}
	// 直播商品
	.live-goods {
		.bg-orange {
			background-color: #f37b1d;
			color: #ffffff;
		}

		.bg-black {
			background-color: #333333;
			color: #ffffff;
		}

		.live-goods-title {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.title {
				flex: 1;
				display: flex;
				font-size: 32rpx;
				height: 93rpx;
				line-height: 93rpx;
				font-weight: bold;
				padding: 0 24rpx;
			}
			.close-icon {
				width: 45rpx;
				height: 45rpx;
				margin: 5px;
			}
		}
		.live-goods-scroll {
			padding-bottom: 50px;
			.goods-item {
				width: 750rpx;
				display: flex;
				flex-direction: row;
				padding: 12rpx 24rpx;
				margin-bottom: 16rpx;
				.goods-image-box {
					width: 220rpx;
					height: 220rpx;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					overflow: hidden;
					position: relative;
					border: #efefef solid 1px;
					.goods-index {
						position: absolute;
						left: 0;
						top: 0;
						z-index: 99999999;
						width: 46rpx;
						height: 28rpx;
						font-size: 20rpx;
						background: rgba(255, 53, 54, 0.8);
						border-radius: 12rpx 0 12rpx 0;
						color: #fff;
						text-align: center;
					}
					.goods-live {
						width: 220rpx;
						position: absolute;
						left: 0;
						bottom: 0;
						z-index: 100;
						background: rgba(255, 53, 54, 0.8);
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						height: 36rpx;
						line-height: 36rpx;
						border-radius: 0 0 12rpx 12rpx;
						overflow: hidden;
						.live-icon {
							width: 16rpx;
							height: 16rpx;
							margin-right: 8rpx;
						}
						.live-text {
							font-size: 20rpx;
							color: #fff;
						}
					}
				}
				.goods-info {
					flex: 1;
					display: flex;
					margin-left: 24rpx;
					position: relative;
					overflow: hidden;
					.goods-name-sign-box {
						flex-wrap: wrap;
					}
					.goods-name-sign {
						margin-bottom: 8rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						/* #ifndef APP-PLUS */
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						line-break: anywhere;
						/* #endif */
						/* #ifdef APP-PLUS */
						display: flex;
						// height: 56rpx;
						flex-direction: row;
						align-items: center;
						flex-wrap: wrap;
						/* #endif */
						.sign {
							padding: 0 5rpx;
							height: 28rpx;
							line-height: 28rpx;
							background: linear-gradient(106deg, #ff3636, #f81a1a);
							color: #ffffff;
							font-size: 20rpx;
							margin-right: 10rpx;
							/* #ifndef APP-PLUS-NVUE */
							white-space: nowrap;
							/* #endif */
						}
					}
					.goods-name {
						flex: 1;
						font-size: 28rpx;
						color: #333333;
						lines: 2;
						overflow: hidden;
						text-overflow: ellipsis;
						font-family: PingFang SC-Regular, PingFang SC;
					}
					.goods-sell-point {
						flex: 1;
						font-size: 24rpx;
						color: #999999;
						lines: 2;
						overflow: hidden;
						text-overflow: ellipsis;
						font-family: PingFang SC-Regular, PingFang SC;
					}
					// 活动标识
					.active-box {
						display: flex;
						flex-direction: row;
						align-items: center;
						overflow: hidden;
						.active-item {
							// #ifdef APP
							// max-width: 144rpx;
							// #endif
							lines: 1;
							overflow: hidden;
							text-overflow: ellipsis;
							padding: 0 8rpx;
							line-height: 28rpx;
							font-size: 20rpx;
							/* #ifndef APP-PLUS-NVUE */
							white-space: nowrap;
							/* #endif */
							margin-left: 8rpx;
							flex-wrap: nowrap;
							border-radius: 5rpx;
							&:first-child {
								margin-left: 0;
							}
						}
					}
					// 按钮及价格信息
					.goods-bar {
						/* #ifndef APP-PLUS */
						width: 100%;
						/* #endif */
						/* #ifdef APP-PLUS */
						width: 450rpx;
						/* #endif */
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						position: absolute;
						bottom: 0;
						left: 0;
						.goods-price {
							flex: 1;
							flex-direction: row;
							align-items: center;
							overflow: hidden;
							.small {
								font-size: 24rpx;
								color: #f81a1a;
							}
							.cur-price {
								// max-width: 150rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								/* #ifndef APP-PLUS */
								display: -webkit-box;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
								line-break: anywhere;
								/* #endif */
								/* #ifdef APP-PLUS */
								flex-direction: row;
								/* #endif */
								align-items: flex-end;
								margin-right: 8rpx;

								&.cur-price-max-w {
									// max-width: 300rpx;
								}

								.big {
									font-size: 32rpx;
									color: #f81a1a;
								}
							}
							.old-price {
								width: 150rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								font-size: 24rpx;
								text-decoration: line-through;
								color: #999;
							}
						}
						// 讲解按钮及抢购按钮
						.btn-box {
							height: 56rpx;
							line-height: 56rpx;
							padding: 0 20rpx;
							background: linear-gradient(90deg, #ff4225, #ff333a);
							border-radius: 60px;
							display: flex;
							flex-direction: row;
							align-items: center;
							.btn-end {
								width: 26rpx;
								height: 26rpx;
								margin-right: 8rpx;
							}
							.btn-play {
								width: 16rpx;
								height: 20rpx;
								margin-right: 12rpx;
							}
							.btn-txt {
								font-size: 28rpx;
								color: #ffffff;
							}
						}
					}
				}
			}
			.list-tips-box {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				.empty-img {
					width: 200rpx;
					height: 200rpx;
					margin-top: 20rpx;
				}
				.empty-txt {
					font-size: 28rpx;
					margin-top: 18rpx;
					color: #999999;
				}
			}
		}
	}
}
</style>
